<template>
	<view>
		<view class="head">
			<!-- 视频路径 -->
			<!-- src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4" -->
			<video
				style="width: 100%;height: 340rpx;"
				id="myVideo"
				direction="0"
				:src="videoUrl ? videoUrl : ''"
				@error="videoErrorCallback"
				:danmu-btn="false"
				:danmu-list="danmuList"
				enable-danmu
				controls
				object-fit="contain"
			></video>
		</view>
		<!-- 视频下面 -->
		<scroll-view scroll-y="true" style="height:71vh">
			<view class="box">
				<view class="title">{{ VideoInfo.data.name ? VideoInfo.data.name : VideoInfo.data.title }}</view>
				<view class="fromer">{{ VideoInfo.data.creator.nickname ? VideoInfo.data.creator.nickname + '上传' : '' }}</view>
				<view class="desc">{{ VideoInfo.data.praisedCount ? VideoInfo.data.praisedCount : VideoInfo.data.playCount }}次播放,2021-10-06</view>
			</view>
			<!-- 相关视频 -->
			<view class="relevant_video">
				<view class="title">相关视频</view>
				<!-- 相关视频列表 -->
				<view class="relevant_video_list">
					<view class="relevant_video_list_item flex justify-between" @click="jumpDetail(im)" v-for="(im, ix) in xgVideoList" :key="ix">
						<view class="left"><image :src="im.data.coverUrl" class="pic" mode=""></image></view>
						<view class="right flex column justify-around">
							<view class="title">{{ im.data.name }}</view>
							<view class="txt">{{ im.data.artists[0].name }}</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 分享 -->
		<view class="share flex justify-center align-center"><view class="btn">分享给朋友</view></view>
	</view>
</template>

<script>
import api from '../../utils/http/api.js';
export default {
	data() {
		return {
			VideoInfo: {
				data: {
					urlInfo: {},
					creator: {
						nickname: ''
					}
				}
			},
			xgVideoList: [] //相关视频
		};
	},
	onLoad() {
		this.xgVideo(); //相关视频
	},
	onShow() {
		this.VideoInfo = uni.getStorageSync('videoDetail');
		console.log(this.VideoInfo, 8054);
	},
	computed: {
		// 视频的URL
		videoUrl() {
			return this.VideoInfo.data.urlInfo.url;
		}
	},
	methods: {
		// 相关视频
		async xgVideo() {
			const res = await api('/video/group', { id: 1000 });
			console.log(res, '相关视频');
			this.xgVideoList = res.datas;
		},
		// 跳转详情
		jumpDetail(im) {
			// 将数据存入缓存中(点击的视频信息)
			uni.setStorageSync('videoDetail', im);
			// 跳转详情
			uni.redirectTo({
				url: '../videoDetail/videoDetail'
			});
		}
	}
};
</script>

<style lang="less">
.head {
	width: 100%;
}
.box {
	padding: 10rpx 30rpx;
	.title {
		width: 100%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		font-size: 36rpx;
	}
	.fromer {
		font-size: 24rpx;
	}
	.desc {
		font-size: 24rpx;
	}
}
// 相关视频
.relevant_video {
	padding: 20rpx 30rpx;
	.title {
		font-size: 36rpx;
	}
	.relevant_video_list {
		padding-bottom: 130rpx;
		.relevant_video_list_item {
			height: 130rpx;
			margin-top: 30rpx;
			.left {
				width: 200rpx;
			}
			.right {
				width: 460rpx;
				.title {
					font-size: 28rpx;
				}
				.txt {
					font-size: 24rpx;
				}
			}
		}
	}
}
// 分享
.share {
	width: 100%;
	height: 135rpx;
	position: fixed;
	bottom: 0;
	background-color: rgba(255, 255, 255, 0.5);
	.btn {
		width: 300rpx;
		height: 62rpx;
		background-color: #31c27c;
		border-radius: 50rpx;
		text-align: center;
		color: #fff;
		line-height: 61rpx;
	}
}
</style>
